import { Link } from '@brillout/docpress'
import { UiFrameworkExtension } from '../../components'
import { ConfigSpec } from '../../components'

<ConfigSpec
  env="client"
  cumulative={false}
/>

The `onPageTransitionStart()` hook, together with <Link href="/onPageTransitionEnd">`onPageTransitionEnd()`</Link>, enables you to implement page transition animations.

```ts
// /pages/+onPageTransitionStart.ts
// Environment: client

import type { PageContextClient } from 'vike/types'

export async function onPageTransitionStart(pageContext: Partial<PageContextClient>) {
  console.log('Page transition start')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.add('page-transition')
}
```

```ts
// /pages/+onPageTransitionEnd.ts
// Environment: client

import type { PageContextClient } from 'vike/types'

export async function onPageTransitionEnd(pageContext: PageContextClient) {
  console.log('Page transition end')
  console.log('Is backwards navigation?', pageContext.isBackwardNavigation)
  document.body.classList.remove('page-transition')
}
```


## Without `vike-{react,vue,solid}`

If you don't use a <UiFrameworkExtension />, then make sure to use <Link href="/client-routing">Client Routing</Link>: the `onPageTransitionStart()` hook requires it (it's executed upon *client-side* navigation).


## See also

- <Link href="/pageContext#isBackwardNavigation" />
- <Link href="/onPageTransitionEnd" />
- <Link href="/onHydrationEnd" />
- <Link href="/onAfterRenderClient" />
- <Link href="/hooks" />
